<template>
    <component :is="tag" :label="label" label-position="left">
        <el-button type="primary" plain @click="open" v-bind="$attrs">
            {{$attrs.value||'编辑'}}
        </el-button>
    </component>
</template>
<script setup lang="tsx">
import {computed,useAttrs} from 'vue'
import {showMsg} from '@dashboard/utils'
import {HrTable} from "gzhr-ui"
import {ElButton} from 'element-plus'
const value = defineModel<any>()
const {label} = defineProps<{
    label:string
}>()
const attrs = useAttrs()
defineOptions({inheritAttrs: false})
//当前标签为空时，不显示标签。因为el-form-item为空时会有bug
const tag = computed(()=>label?'el-form-item':'div')
const open = ()=>{
    // const pagination = {"Page":1,"PageSize":30,"Total":11};
    let close = showMsg({
        title:(label||attrs.value)as string,
        component:{
            data(){
                return {
                    pagination:{"Page":1,"PageSize":30,"Total":0}
                }
            },
            render(){
                return (
                    <div style="width:100%;height:100%;padding: 10px;box-sizing: border-box;">
                        <div style="height:100%;width:100;border:1px solid rgb(223 223 223);border-radius:8px;">
                            <div style="height:40px;width:100%;padding: 8px 15px;box-sizing: border-box;display: grid;grid-template-columns: 30% 70%;border-bottom:1px solid rgb(233 233 233);">
                                <div style="height:100%;">
                                </div>
                                <div style="height:100%;display:flex;justify-content: flex-end;">
                                    <ElButton type="primary" size="small" style="height:100%;" onClick={this.add}>新增</ElButton>
                                    <ElButton type="primary" size="small" style="height:100%;" onClick={this.save}>确定</ElButton>
                                </div>
                            </div>
                            <div id="table" style="height: calc(100% - 40px);" >
                                <HrTable
                                ref="table"  // 使用 ref 获取组件实例
                                config={attrs.config}  // 传递 config 属性
                                pagination={this.pagination}  // 传递 pagination 属性
                                onActionClick={this.handleActionClick}  // 绑定事件
                                />
                            </div>
                        </div>
                    </div>
                )
            },
            mounted(){
                setTimeout(()=>{
                    let mounted = attrs.mounted&&typeof attrs.mounted=='function'?
                    attrs.mounted:(e)=>e;
                    let data = mounted(value.value);
                    this.$refs.table.gridRef.loadData(JSON.parse(JSON.stringify(data)));
                    this.pagination.Total = value.value.length;
                },10)
            },
            methods:{
                add(){
                    let tableData = this.$refs.table.gridRef.getTableData().tableData;
                    this.$refs.table.gridRef.insertNextAt({guid:Date.now()},tableData[tableData.length-1])
                    this.pagination.Total++;
                },
                save(){
                    let data = JSON.parse(JSON.stringify(this.$refs.table.gridRef.getTableData().tableData))
                    let newData = data.map(e=>{
                        for(let key in e){
                            if(e[key]==null||e[key]=='')
                            delete e[key]
                        }
                        return e
                    })
                    let beforeSave = attrs.beforeSave&&typeof attrs.beforeSave=='function'?
                    attrs.beforeSave:(e)=>e;
                    value.value = beforeSave(newData);
                    close()
                },
                handleActionClick(e){
                    if(e.btnInfo.Type=='Delete')
                    e.gridRef.remove(e.row)
                    this.pagination.Total--;
                }
            }
        }
    })
    
}
const config = {
    "Number": true,
    "AutoFullWidth": true,
    "height": "100%",
    "columns": [
        {
            "slots": {},
            "params": {},
            "type": "seq",
            "title": "序号",
            "align": "center",
            "fixed": "left",
            "width": 50
        },
        {
            "slots": {
                "header": "FilterRows",
                "default": "ActionRender"
            },
            "params": {
                "LinkButton": [
                    {
                        "Name": "删除",
                        "Type": "Delete"
                    }
                ]
            },
            "field": "action",
            "title": "操作",
            "colId": "action",
            "filters": [
                {
                    "data": ""
                }
            ],
            "fixed": "left",
            "align": "center",
            "editRender": {
                "enabled": false
            },
            "width": 80
        },
        {
            "slots": {
                "header": "FilterRows",
                "edit": "InputEditor"
            },
            "params": {},
            "field": "title",
            "title": "标题",
            "colId": "title",
            "width": 200,
            "align": "center",
            "editRender": {
                "enabled": true,
                "autofocus": ".el-input__inner"
            }
        },
        {
            "slots": {
                "header": "FilterRows",
                "edit": "InputEditor"
            },
            "params": {},
            "field": "path",
            "title": "路径",
            "colId": "path",
            "width": 180,
            "align": "center",
            "editRender": {
                "enabled": true,
                "autofocus": ".el-input__inner"
            }
        },
        {
            "slots": {
                "header": "FilterRows",
                "edit": "InputEditor"
            },
            "params": {},
            "field": "param",
            "title": "参数",
            "colId": "param",
            "width": 180,
            "align": "center",
            "editRender": {
                "enabled": true,
                "autofocus": ".el-input__inner"
            }
        },
        {
            "slots": {
                "header": "FilterRows",
                "edit": "InputEditor"
            },
            "params": {},
            "field": "icon",
            "title": "图标",
            "colId": "icon",
            "width": 180,
            "align": "center",
            "editRender": {
                "enabled": true,
                "autofocus": ".el-input__inner"
            }
        }
    ],
    "stripe": true,
    "rowConfig": {
        "keyField": "guid"
    }
}
config
</script>
<style scoped>
.el-form-item>:deep(.el-form-item__content){
    justify-content: center;
}
</style>